<template>
	<view class="root">
		<view class="navigation fixed width-100vw fd-row jc-sa bgc-fff">
			<label
				v-for="(nav, index) in navigation"
				:key="index"
				:class="[
					{ active: navIndex === index },
					'fs-28',
					'lh-80',
					'color-999',
					'relative',
				]"
				@click="switchNav(index)"
			>
				{{ nav.title }}({{ nav.number }})
			</label>
		</view>

		<view class="mt-100 pt-20 pb-30 bgc-fff">
			<view
				v-for="(source, index) in sources.list"
				:key="index"
				class="option br-10"
			>
				<label class="mt-30 ml-30 mr-30">
					<image
						class="width-80 height-80 br-circle"
						:src="
							source.avatarUrl ||
							'/static/images/default-avatar.png'
						"
						mode="aspectFill"
					/>
					<view class="f1 ml-12 mr-12">
						<text class="color-1b1b1b fs-28">
							{{ source.nickName }}
						</text>
						<text class="color-999 fs-22">
							工单编号：{{ source.sn }}
						</text>
						<text class="color-999 fs-22">
							提交时间：{{ source.add_time }}
						</text>
					</view>

					<text class="fs-24 color-1c9dff as-start">等待审核</text>
				</label>
				<scroll-view class="photos bgc-f7f7f7 mt-30" scroll-x>
					<image
						v-for="(photo, index) in source.photos"
						:key="photo"
						class="photo br-10 mr-22 mt-30 mb-30"
						:src="photo"
						@click="previewPhoto(source.photos, index)"
						mode="aspectFill"
					/>
				</scroll-view>
				<text class="option-bottom fs-24 color-ff4a5b f1">
					信息源：{{ source.content }}
				</text>
			</view>
			<uni-load-more :status="loadStatus" />
		</view>
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import { Pager } from "@/common/type";

	let requestFlag: boolean = false;

	@Component({ components: { uniLoadMore } })
	export default class InformationSource extends Vue {
		navIndex: number = -1;
		loadStatus: string = "loading";
		sources: Pager<AnyObject> = {
			list: [],
			page: 1,
		};
		navigationNumbers: AnyObject = {};

		public get navigation(): AnyObject[] {
			return [
				{
					title: "全部",
					number: this.navigationNumbers.count_all,
				},
				{
					title: "待审核",
					number: this.navigationNumbers.count_wait,
				},
				{
					title: "已审核",
					number: this.navigationNumbers.count_finish,
				},
			];
		}

		onNavigationBarButtonTap(e: AnyObject) {
			if (e.float !== "right") return;
			uni.navigateTo({ url: "/pages/home/submitInformation" });
		}

		onLoad() {
			this.switchNav(0);
		}

		switchNav(index: number) {
			if (this.navIndex === index) return;
			this.navIndex = index;

			this.sources = { list: [], page: 1 };
			this.getData();
		}

		getData() {
			if (requestFlag || !this.sources.page) return;
			this.loadStatus = "loading";
			requestFlag = true;

			this.request
				.get("/employee/informationList", {
					status: this.navIndex,
					page: this.sources.page,
				})
				.then(({ data }) => {
					data.count && (this.navigationNumbers = data.count);

					this.sources.page = +data.page;
					this.sources.list.push(...data.list);
					this.loadStatus = +data.page ? "more" : "noMore";

					requestFlag = false;
				});
		}

		previewPhoto(urls: string[], current: string) {
			uni.previewImage({ urls, current });
		}
	}
</script>

<style lang="scss" scoped>
	.root {
		.navigation {
			z-index: 9;
			.active {
				color: #1b1b1b;
				&::after {
					content: "";
					position: absolute;
					width: 72%;
					height: 5rpx;
					background-color: #1c9dff;
					border-radius: 3rpx;
					bottom: 0;
					left: 50%;
					margin-left: -36%;
				}
			}
		}
		.option {
			margin: 15rpx 30rpx;
			box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.1);
			.photos {
				padding: 0 30rpx;
				white-space: nowrap;
				.photo {
					display: inline-block;
					width: 130rpx;
					height: 130rpx;
				}
			}
			&-bottom {
				padding: 20rpx 30rpx;
			}
		}
	}
</style>